import * as React from "react";
import * as ReactDOM from "react-dom";
import Counter from "./components/Counter";
import Todos from "./components/Todos";
import store from '@/store'
import { Provider } from 'react-redux'
import {  Route, Link, Switch } from 'react-router-dom'
import history from '@/history';
import {ConnectedRouter} from 'connected-react-router';

ReactDOM.render(<>
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <React.Fragment>
                <ul>
                    <li><Link to="/counter/Ikki">counter</Link></li>
                    <li><Link to={{ pathname: "/todos", state: { name: 'todoName' } }}>todos</Link></li>

                </ul>
                <Switch>
                    <Route path="/counter/:name" component={Counter} />
                    <Route path="/todos" component={Todos} />
                </Switch>
            </React.Fragment>
        </ConnectedRouter>
    </Provider>
</>, document.getElementById("root"));



// import * as React from "react";
// import * as ReactDOM from "react-dom";
// import Counter from "./components/Counter";
// import Todos from "./components/Todos";
// import store from '@/store'
// console.log(store.getState());
// import { Provider } from 'react-redux'
// import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'


// ReactDOM.render(<>
//     <Provider store={store}>
//         <Router >
//             <React.Fragment>
//                 <ul>
//                     <li><Link to="/counter/Ikki">counter</Link></li>
//                     <li><Link to={{ pathname: "/todos", state: { name: 'todoName' } }}>todos</Link></li>

//                 </ul>
//                 <Switch>
//                     <Route path="/counter/:name" component={Counter} />
//                     <Route path="/todos" component={Todos} />
//                 </Switch>
//             </React.Fragment>
//         </Router>
//     </Provider>
// </>, document.getElementById("root"));

// import * as React from "react";
// import * as ReactDOM from "react-dom";
// import Counter from "./components/Counter";
// import Todos from "./components/Todos";
// interface Props {
//     name:string
// }
// interface State {
//     allNum:number
// } 
// class App extends React.Component<Props,State>{
//     constructor(props:Props){
//         super(props)
//         this.state = {
//             allNum:0
//         }
//     }
//     addNum = (v:number)=>{
//         this.setState({
//             allNum:v
//         })
//     }
//     render(){
//         return(
//             <><Counter allNum={this.state.allNum}></Counter ><Todos addNum={this.addNum} /></>

//         )
//     }
// }


// ReactDOM.render(<App name="ikki"></App>, document.getElementById("root"));
